<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./assets/css/amazeui.min.css">
    <link rel="stylesheet" href="./assets/plugins/toastr/toastr.min.css">
    <title>注册页面</title>

    <style>

    .container h1{
        font-size: 8rem;
        font-weight: lighter;
    }
    .am-form-icon [class*=am-icon-]{ 
        display: none;
    }
    .am-form-success .am-icon-check{ 
        display: block !important;
    }
    .am-form-error .am-icon-times{
        display: block !important;
    }
    body{overflow: hidden;}

    .mask{
        width:100%;
        height: 100%;
        background:#fff;
        color:#333;
        position:fixed;
        top:0;left:0;

        transition:all 500ms;
    }
    .mask .number{
        position:absolute;
        right:30px;
        bottom:30px;
        font-size:10rem;
        font-style: italic;
        font-weight: lighter;
    }


    @media screen and (max-width: 1000px) {
        body{
            background:url(./img/bg.png) repeat;
           
        
        }
       .container{
           width:80%;
            margin:0 auto;
        }
    }

    @media screen and (min-width: 1000px) {
        body{
            background:#f8f9c2;
        
        }
       .container{
            width:1000px;
            margin:0 auto;
        }
    }
    
    </style>
    
</head>
<body>
    
    <div class="container">
       
      <h1 class="am-text-center">你的名字</h1>
    <figure data-am-widget="figure" class="am am-figure am-figure-default "   data-am-figure="{  pureview: 'true' }">
          <img src="./img/cover-1.png" data-rel="./img/cover-1.png" alt="你的名字剧照"/>
          <figcaption class="am-figure-capition-btm">
            你的名字 剧照
          </figcaption>
  </figure>
  <figure data-am-widget="figure" class="am am-figure am-figure-default "   data-am-figure="{  pureview: 'true' }">
          <img src="./img/cover-2.png" data-rel="./img/cover-2.png" alt="你的名字剧照"/>
          <figcaption class="am-figure-capition-btm">
            你的名字 剧照
          </figcaption>
  </figure>
  <figure data-am-widget="figure" class="am am-figure am-figure-default "   data-am-figure="{  pureview: 'true' }">
          <img src="./img/cover-3.png" data-rel="./img/cover-3.png" alt="你的名字剧照"/>
          <figcaption class="am-figure-capition-btm">
            你的名字 剧照
          </figcaption>
  </figure>
  <figure data-am-widget="figure" class="am am-figure am-figure-default "   data-am-figure="{  pureview: 'true' }">
          <img src="./img/cover-4.png" data-rel="./img/cover-4.png" alt="你的名字剧照"/>
          <figcaption class="am-figure-capition-btm">
            你的名字 剧照
          </figcaption>
  </figure>
  <figure data-am-widget="figure" class="am am-figure am-figure-default "   data-am-figure="{  pureview: 'true' }">
          <img src="./img/cover-5.png" data-rel="./img/cover-5.png" alt="你的名字剧照"/>
          <figcaption class="am-figure-capition-btm">
            你的名字 剧照
          </figcaption>
  </figure>
  <figure data-am-widget="figure" class="am am-figure am-figure-default "   data-am-figure="{  pureview: 'true' }">
          <img src="./img/cover-6.png" data-rel="./img/cover-6.png" alt="你的名字剧照"/>
          <figcaption class="am-figure-capition-btm">
            你的名字 剧照
          </figcaption>
  </figure>


        <form class="am-form">
  <fieldset>
    <legend>登录查看详情</legend>

    <div id="form-input-name" class="am-form-group am-form-icon am-form-feedback">
    <label class="am-form-label" for="doc-ipt-success">姓名</label>
    <input type="text" id="doc-ipt-success" class="am-form-field">
     <span class="am-icon-check"></span>
     <span class="am-icon-times"></span>
  </div>

    <div class="am-form-group">
      <label for="doc-ipt-pwd-1">密码</label>
      <input type="password" class="" id="doc-ipt-pwd-1" placeholder="设置个密码吧">
    </div>









    <p><button type="submit" class="am-btn am-btn-primary">提交</button></p>
  </fieldset>
</form>
    </div>


<div class="mask">
    <div class="number">
        0%
    </div>

</div>

    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/plugins/toastr/toastr.min.js"></script>
    <script src="./assets/plugins/ip/jquery.imgpreload.min.js"></script>
    <script>
           $(function(){


                function Percentage(num, total) { 
                                    return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比
                                
                                }
               function image_preload(){
                var total_image= $('img').length;
                var loaded_count =0;

               

                $('img').imgpreload({
                        each: function()
                        {
                           loaded_count++;
                           console.log(loaded_count);
                           
                           $('.number').text(Percentage(loaded_count,total_image));
                        },
                        all: function()
                        {
                            $('.mask').css("opacity",0);
                            $('body').css("overflow","auto");
                            setTimeout(function() {
                                $('.mask').remove();
                            }, 1000);
                        }
                    });


               }
                

                function show_info(msg){
                        
                        if(typeof layer == "object"){
                            layer.msg(msg);
                            return;
                        }
                        if(typeof toastr == "object"){

                            toastr.options = {
                                "closeButton": false,
                                "debug": false,
                                "positionClass": "toast-bottom-right",
                                "onclick": null,
                                "showDuration": "100",
                                "hideDuration": "500",
                                "timeOut": "2000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                                }



                            toastr.error(msg,"友情提示");
                            return;
                        }



                        
                }

               function checkname(_name){
                   $.ajax({
                        type:"get",
                       url:"http://www.jiazhi.com/register/server/check.php",
                       data:{
                           nickname:_name
                       },
                       success:function(rsp){                     

                          if(rsp.error==0){
                            $('#form-input-name').addClass('am-form-success').removeClass("");                            
                          }else{
                              $('#form-input-name').addClass('am-form-error').removeClass("am-form-success");                            
                            show_info(rsp.errmsg);
                              
                          }
                       }
                      })
               }



               $("#doc-ipt-success").on("blur",function(){

                   var _name = $('#doc-ipt-success').val();
                    checkname(_name);
               })   
             

             image_preload();
           })   
           
    </script>
</body>
</html>